<template>
  <div class="container">
    <div class="welcome">
      <div class="user_data top">
        <div class="header">
          <div>
            <span>用户数据</span>
            <a-icon :spin="spin1" @click="refresh(1)" type="sync" :style="{ fontSize: '16px', color: '#08c' }" />
          </div>
        </div>
        <div class="box">
<!--          <a-row>-->
<!--            <a-col>-->
<!--              <Acard title="今日活跃用户数">-->
<!--                <span>-->
<!--                  {{ userData.activeUser ?? 0 }}-->
<!--                </span>-->
<!--              </Acard>-->
<!--            </a-col>-->
<!--          </a-row>-->
          <div class="item">
            <p>今日活跃用户数</p>
            <span>{{ userData.activeUser ?? 0 }}</span>
          </div>
          <div class="item">
            <p>总用户数</p>
            <span>{{ userData.totalUser ?? 0 }}</span>
          </div>
          <div class="item">
            <p>今日新增用户数</p>
            <span>{{ userData.newUser ?? 0 }}</span>
          </div>
        </div>
      </div>
      <div class="user_data">
        <div class="header">
          <div>
            <span>绩效概况</span>
            <a-icon :spin="spin2" @click="refresh(2)" type="sync" :style="{ fontSize: '16px', color: '#08c' }" />
          </div>
          <div class="range">
            <a-range-picker @change="onChange" v-model="date" />
            <a-button type="primary" class="search" @click="getList(2)">查询</a-button>
            <a-button @click="clear">重置</a-button>
          </div>
        </div>
        <div class="box">
          <div class="item">
            <p>充值金额（总额/笔数）</p>
            <span>{{ overviewPerformance.rechargeSum ?? 0 }} / {{ overviewPerformance.rechargeCount ?? 0 }}</span>
          </div>
          <div class="item">
            <p>投资项目（总额/笔数）</p>
            <span>{{ overviewPerformance.investmentSum ?? 0 }} / {{ overviewPerformance.investmentCount ?? 0 }}</span>
          </div>
        </div>
        <div class="box">
          <div class="item">
            <p>提现申请（总数/笔数）</p>
            <span>{{ overviewPerformance.withdrawSum ?? 0 }} / {{ overviewPerformance.withdrawCount ?? 0 }}</span>
          </div>
          <div class="item">
            <p>提现拒绝（总数/笔数）</p>
            <span
            >{{ overviewPerformance.withdrawRefuseSum ?? 0 }} / {{ overviewPerformance.withdrawRefuseCount ?? 0 }}</span
            >
          </div>
          <div class="item">
            <p>提现完成（总数/笔数）</p>
            <span
            >{{ overviewPerformance.withdrawFinishSum ?? 0 }} / {{ overviewPerformance.withdrawFinishCount ?? 0 }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { welcome } from '@/api/login'
import { mapGetters } from 'vuex'
import common from '@/common/index'
import Acard  from '@/components/Acard/index.vue'
export default {
  name: 'welcome',
  components: {
    Acard
  },
  data() {
    return {
      headerStyle:{
        fontSize:'12px',
        padding:'0 8px',
        fontWeight:'bold'
      },
      spin2: false,
      spin1: false,
      startTime: '',
      endTime: '',
      userData: {
        activeUser: 0, // 今日活跃数
        totalUser: 0, // 总用户数
        newUser: 0, // 今日新增用户数
      },
      overviewPerformance: {
        rechargeSum: 0, // 充值金额（总额）
        rechargeCount: 0, // 充值金额（笔数）
        investmentSum: 0, // 投资项目（总额）
        investmentCount: 0, // 投资项目（笔数）
        withdrawCount: 0, // 提现申请（笔数 ）
        withdrawSum: 0, // 提现申请（总额）
        withdrawRefuseCount: 0, // 提现拒绝（笔数）
        withdrawRefuseSum: 0, // 提现拒绝（总额）
        withdrawFinishCount: 0, // 提现完成（笔数）
        withdrawFinishSum: 0, // 提现完成（总额）
      },
      date: null,
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.getList(0)
  },
  methods: {
    refresh(type) {
      type === 1 ? (this.spin1 = true) : (this.spin2 = true)
      this.getList(type)
    },
    onChange(date, dateString) {
      this.endTime = dateString[1]
      this.startTime = dateString[0]
      this.date = dateString
    },
    clear() {
      this.date = null
      this.getList(2)
    },
    getList(type) {
      const { userId } = this.userInfo
      const params = { userId, area: type, endTime: this.endTime, startTime: this.startTime }
      welcome(params)
        .then((res) => {
          if (res.code === 200) {
            switch (type) {
              case 0:
                this.userData = {
                  activeUser: common.numFormat(res.data.activeUser ?? 0), // 今日活跃数
                  totalUser: common.numFormat(res.data.totalUser ?? 0), // 总用户数
                  newUser: common.numFormat(res.data.newUser ?? 0), // 今日新增用户数
                }
                this.overviewPerformance = {
                  rechargeSum: common.numFormat(res.data.rechargeSum ?? 0), // 充值金额（总额）
                  rechargeCount: common.numFormat(res.data.rechargeCount ?? 0), // 充值金额（笔数）
                  investmentSum: common.numFormat(res.data.investmentSum ?? 0), // 投资项目（总额）
                  investmentCount: common.numFormat(res.data.investmentCount ?? 0), // 投资项目（笔数）
                  withdrawCount: common.numFormat(res.data.withdrawCount ?? 0), // 提现申请（笔数 ）
                  withdrawSum: common.numFormat(res.data.withdrawSum ?? 0), // 提现申请（总额）
                  withdrawRefuseCount: common.numFormat(res.data.withdrawRefuseCount ?? 0), // 提现拒绝（笔数）
                  withdrawRefuseSum: common.numFormat(res.data.withdrawRefuseSum ?? 0), // 提现拒绝（总额）
                  withdrawFinishCount: common.numFormat(res.data.withdrawFinishCount ?? 0), // 提现完成（笔数）
                  withdrawFinishSum: common.numFormat(res.data.withdrawFinishSum ?? 0), // 提现完成（总额）
                }
                this.spin1 = false
                this.spin2 = false
                break
              case 1:
                this.userData = {
                  activeUser: res.data.activeUser, // 今日活跃数
                  totalUser: res.data.totalUser, // 总用户数
                  newUser: res.data.newUser, // 今日新增用户数
                }
                this.spin1 = false
                break
              case 2:
                this.overviewPerformance = {
                  rechargeSum: res.data.rechargeSum, // 充值金额（总额）
                  rechargeCount: res.data.rechargeCount, // 充值金额（笔数）
                  investmentSum: res.data.investmentSum, // 投资项目（总额）
                  investmentCount: res.data.investmentCount, // 投资项目（笔数）
                  withdrawCount: res.data.withdrawCount, // 提现申请（笔数 ）
                  withdrawSum: res.data.withdrawSum, // 提现申请（总额）
                  withdrawRefuseCount: res.data.withdrawRefuseCount, // 提现拒绝（笔数）
                  withdrawRefuseSum: res.data.withdrawRefuseSum, // 提现拒绝（总额）
                  withdrawFinishCount: res.data.withdrawFinishCount, // 提现完成（笔数）
                  withdrawFinishSum: res.data.withdrawFinishSum, // 提现完成（总额）
                }
                this.spin2 = false
                break
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {})
    },
  },
}
</script>
<style lang="less" scoped>
.welcome {
  .top {
    margin-bottom: 60px;
  }
  .header {
    display: flex;
    align-items: center;
    span {
      font-weight: 700;
      font-size: 20px;
      margin-right: 10px;
    }

    .range {
      margin-left: 40px;
      .search {
        margin-left: 5px;
        margin-right: 15px;
      }
    }
  }
  .box {
    display: flex;
    align-items: center;
    .item {
      margin-right: 100px;
      display: flex;
      flex-direction: column;
      width: 300px;
      padding: 20px 0;
      font-size: 20px;
      margin-top: 20px;
      span {
        border-radius: 5px;
        background: #fff;
        width: 300px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        font-size: 22px;
        font-weight: 600;
      }
    }
  }
}
</style>
